<template>
  <div>
    <el-card>
      <template #header>入驻协议</template>
      <common-form
        :form-infos="formInfos"
        :form-attrs="{ 'label-width': 'auto', size: 'small' }"
        @submit="onSubmit"
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, shallowReactive } from "vue";

export default defineComponent({
  name: "ShopSettledAgreement",
  setup() {
    const formInfos = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "username",
        value: "商家入驻协议",
        rule: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" },
        ],
        formItemAttrs: {
          label: "入驻协议",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入用户名",
          "input-style": { width: "200px" },
        },
      },
      {
        id: 0,
        name: "CommonEditor",
        prop: "editor",
        value: "",
        formItemAttrs: {
          label: "协议内容",
        },
      },
    ]);

    const onSubmit = (data: any) => {
      console.log(data);
    };

    return {
      formInfos,
      onSubmit,
    };
  },
});
</script>
